<template>
  <div class="user" style="height: 80%;">
    <el-button type="primary" @click="open" style="margin-bottom: 20px">+新增用户</el-button>
    <el-table
        :data="tableData"
        style="width: 100%;overflow: auto"
    height="100%">
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="addr"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="birth"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="editList(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delhanlders(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="50%" :before-close="handleClose">
          <el-form :model="form" :inline = "true" :rules="rules" ref="forms"><!-- //:inline = "true"!-->
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="on"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="addr">
          <el-input v-model="form.addr" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age" style="position: relative;right: 34px;">
          <el-input v-model="form.age" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="出身日期" :label-width="formLabelWidth" prop="birth">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sumbit">提交</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>

import {getTableList,createListUser,deleteList,EditList} from "../../api/index"
export default {
  name: "User",
  data(){
    return{
      name:'ll',
      form: {
        name: '',
        sex: '',
        addr: '',
        age: '',
        birth: '',
      },
      formLabelWidth: '90px',
      dialogVisible: false,
      dialogFormVisible: false,
      tableData:[],
      modTable:0,//0表示为add  1表示Edit
      rules:{
        name: [
          { required: true, message: '请输入活动名称'}
        ],
        sex: [
          { required: true, message: '请选择性别'}
        ],
        addr: [
          {required: true, message: '请选择地址'}
        ],
        age: [
          { required: true, message: '请写年龄'}
        ],
        birth: [
          { required: true, message: '请选择时间'}
        ],
      }
    }
  },
  mounted () {
    this.getUersList()
    console.log (this.modTable)
  },
  methods:{
    open(){
      this.dialogFormVisible = true
    },
    sumbit(){
      this.$refs.forms.validate((val)=>{
        console.log(val,"val")
        if (val){
          if (this.modTable === 0){
            //调用添加的接口然后更新列表
            createListUser(this.form).then(()=>{
              this.getUersList()
            })
          }else {
            //编辑表格
            EditList(this.form).then(()=>{
              this.getUersList()
            })
          }
          this.tableData.push(this.form)
          this.dialogFormVisible=false
          this.$refs.forms.resetFields()
        }
      })
    },
    getUersList(){
      getTableList().then(({data})=>{
        this.tableData  = data.list
        this.tableData.forEach(p=>{
          p.sex = p.sex?'男':'女'
        })
      }).catch((error)=>{
        console.log(error)
      })
    },
    editList(row){
        this.modTable = 1
        this.dialogFormVisible  = true
        this.form  = JSON.parse(JSON.stringify(row))
    },
    handleClose(){
      console.log("hgfedhjg")
      this.$refs.forms.resetFields()
      this.dialogFormVisible=false
    },
    cancel(){
      this.handleClose()
      console.log (this.modTable,"this.modTable")
      console.log (this.form,"uuuu")
    },
    delhanlders(row){
      this.$confirm('·此操作将永久'+`<mark>${row.name}</mark>`+'文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteList(row).then(()=>{
          this.getUersList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.cell{
  font-size: 12px
}
</style>
